import { View, Grid } from '@aws-amplify/ui-react';
import { CardLinkGroup, CardLink } from '@/components/CardLink';
import { Fragment } from '@/components/Fragment';
import { Example, ExampleCode } from '@/components/Example';
import { LabelInputExample, CheckboxExample, NavRoleExample, AriaLiveExample, ThemeExample } from './examples';
import { MdOutlineCheckBox, MdEdit, MdOutlineAutoAwesome } from 'react-icons/md';

<Fragment>
  {({ platform }) => import(`./intro.mdx`)}
</Fragment>

## What's included?

Amplify UI components have some accessibility needs baked in for ease of use. This includes auto-associating labels with form inputs, a default theme with accessible color contrast, and the flexibility to enhance components to create your own accessible patterns.

##  Accessible form fields

### Form Labels

All of Amplify UI's form field components require passing a label to the input. If an ID is not supplied for the component, one is autogenerated for you so that the label can be programatically associated with the input.

<Example>
  <LabelInputExample />
  <ExampleCode>
```jsx file=./examples/LabelInputExample.tsx

```
  </ExampleCode>
</Example>

One use case for passing your own custom id to the field is if you need to target it for testing.

### Web standards

Amplify UI also follows web standards as much as possible for our components, including relying on native web controls. For example, our CheckboxField is styled to match our default theme, but still uses an `<input type="checkbox" />` as the base component.
  
<Example>
  <CheckboxExample />
  <ExampleCode>
```jsx file=./examples/CheckboxExample.tsx

```
  </ExampleCode>
</Example>

<CardLinkGroup>
 <CardLink 
  icon={<MdEdit />}
  href="/react/components/textfield#accessibility--label-behavior"
  title="Accessible input labels"
  desc="Learn about making accessible labels for the TextField component" />
<CardLink 
  icon={<MdOutlineCheckBox />}
  href="/react/components/checkboxfield#css-styling"
  title="Styling Checkbox inputs"
  desc="Various ways to style the CheckboxField" />
</CardLinkGroup>

## Themeable design tokens

Amplify UI uses design tokens for the color palette, which makes modifying the theme to meet your own color contrast goals more manageable. Amplify UI also provides tokens for properties such as border width and font size if you need to make your own customizations for higher contrast requirements.

The example below shows how to use Theming to supply higher contrast text and border styles.

<View backgroundColor="white" color="black">
<Example>
  <ThemeExample />
  <ExampleCode>
```jsx file=./examples/ThemeExample.tsx

```
  </ExampleCode>
</Example>
</View>

<CardLinkGroup>
  <CardLink 
    icon={<MdOutlineAutoAwesome />}
    href="/react/theming#getting-started"
    title="Theming overview"
    desc="Learn how to make a custom theme" />
</CardLinkGroup>

## Enhanceable primitives

Since Amplify UI supports passing down HTML and ARIA attributes to primitive components, it's possible to create your own accessible patterns. The following example shows how to use a View component as an HTML `nav` element and how to add a unique name to the `nav` element using an `aria-label` attribute.
 
<Example>
  <NavRoleExample />
  <ExampleCode>
```jsx file=./examples/NavRoleExample.tsx

```
  </ExampleCode>
</Example>

The next example shows how we can add an `aria-live` attribute to our Badge component to announce when the value is updated.

<Example>
  <AriaLiveExample />
  <ExampleCode>
```jsx file=./examples/AriaLiveExample.tsx

```
  </ExampleCode>
</Example>